<template>
  <div class="friend-circle-send">
    <!-- 设置发送内容 -->
    <div class="set-send-content scroll">
      <div class="set-circle-type">
        <span class="base-tips">朋友圈类型</span>
        <el-radio-group
          class="can-not-select"
          v-model="circleType"
          size="medium"
        >
          <el-radio-button label="text">纯文本</el-radio-button>
          <el-radio-button label="picture">图片</el-radio-button>
          <el-radio-button label="video">视频</el-radio-button>
          <el-radio-button label="link">链接</el-radio-button>
        </el-radio-group>
      </div>

      <!-- 文本 -->
      <div class="set-circle-text">
        <span class="base-tips can-not-select">输入文本内容</span>
        <el-input
          type="textarea"
          placeholder="这一刻的想法..."
          style="height: auto; width: 50%"
          v-model="text"
          maxlength="500"
          show-word-limit
          :autosize="{ minRows: 6, maxRows: 6 }"
          resize="none"
        ></el-input>
      </div>

      <!-- 上传图片|视频 -->
      <div v-if="circleType !== 'link'" class="set-circle-other">
        <span class="base-tips can-not-select" v-text="'上传文件'"></span>
        <!-- 文本 -->
        <el-upload
          v-if="circleType === 'text'"
          action="http://www.jjldkj.com:10089/fileUpload2020"
          list-type="picture-card"
          class="el-upload-text"
          :data="upData"
          disabled
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!-- 图片 -->
        <el-upload
          v-if="circleType === 'picture'"
          class="set-image-ulrs"
          action="http://www.jjldkj.com:10089/fileUpload2020"
          list-type="picture-card"
          accept=".jpg, .png, .jpeg"
          :class="{ hide: hideUpload }"
          :multiple="true"
          :limit="9"
          :file-list="imagesList"
          :data="upData"
          :show-file-list="showFileList"
          :on-change="handleImageChange"
          :before-upload="beforeImageUpload"
          :on-success="handleImageSuccess"
          :on-error="handleImageError"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleImageRemove"
          :on-exceed="handleImageExceed"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <!-- 上传视频 -->
        <el-upload
          v-if="circleType === 'video'"
          action="http://www.jjldkj.com:10089/fileUpload2020"
          list-type="picture-card"
          accept=".mp4"
          :file-list="videoList"
          :class="{ hide: hideVideoUpload }"
          :multiple="false"
          :limit="1"
          :data="upData"
          :show-file-list="showVideoList"
          :before-upload="beforeVideoUpload"
          :on-success="handleVideoSuccess"
          :on-error="handleVideoError"
        >
          <i slot="default" class="el-icon-plus"></i>
          <div slot="file" slot-scope="{ file }">
            <video
              class="el-upload-list__item-thumbnail"
              :src="file.url"
              alt
            ></video>
            <span class="el-upload-list__item-actions">
              <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
              >
                <i class="el-icon-zoom-in"></i>
              </span>
              <span
                class="el-upload-list__item-delete"
                @click="handleVideoRemove(file)"
              >
                <i class="el-icon-delete"></i>
              </span>
            </span>
          </div>
        </el-upload>

        <div class="media-tip">
          <i style="color: #f5a623" class="el-icon-info"></i>
          <span
            style="margin-left: 5px; color: #909399"
            v-text="circleTypeTip[circleType]"
          ></span>
        </div>
      </div>

      <!-- 设置链接 -->
      <template v-if="circleType === 'link'">
        <!-- 图片的url -->
        <div class="set-circle-link">
          <span class="base-tips">请输入图片地址</span>
          <el-input
            placeholder="请输入图片地址"
            v-model="linkImg"
            maxlength="200"
            minlength="12"
            clearable
          ></el-input>
        </div>
        <!-- 链接的title -->
        <div class="set-circle-link">
          <span class="base-tips">请输入链接标题</span>
          <el-input
            type="textarea"
            placeholder="请输入链接标题"
            v-model="linkTitle"
            maxlength="200"
            show-word-limit
            :autosize="{ minRows: 6, maxRows: 6 }"
            resize="none"
          ></el-input>
        </div>
        <!-- 链接的url -->
        <div class="set-circle-link">
          <span class="base-tips">请输入链接地址</span>
          <el-input
            placeholder="请输入链接地址"
            v-model="linkUrl"
            maxlength="200"
            minlength="12"
            clearable
          ></el-input>
        </div>
      </template>
      <!-- 评论窗口 -->
      <div class="set-circle-comment">
        <span class="base-tips can-not-select">输入评论(可选)</span>
        <el-input
          type="textarea"
          placeholder="如果有需要，请输入评论"
          style="height: auto; width: 50%"
          v-model="comment"
          maxlength="300"
          show-word-limit
          :autosize="{ minRows: 6, maxRows: 6 }"
          resize="none"
        ></el-input>
      </div>
      <!-- 谁可以看 -->
      <div class="visible-type">
        <span class="base-tips">谁可以看</span>
        <el-radio-group
          v-model="visibleType"
          size="medium"
          class="can-not-select"
        >
          <el-radio-button label="0">公开</el-radio-button>
          <el-radio-button :disabled="sendRadio === 'timing'" label="1"
            >私密</el-radio-button
          >
          <el-radio-button :disabled="sendRadio === 'timing'" label="2"
            >部分可见</el-radio-button
          >
          <el-radio-button label="3">不给谁看</el-radio-button>
        </el-radio-group>
        <el-button
          circle
          v-if="visibleType > 1"
          icon="el-icon-setting"
          size="small"
          type="success"
          style="padding: 5px; margin-left: 5px"
          @click="() => (friendsDialogVisible = true)"
        ></el-button>
      </div>
    </div>

    <!-- 操作 -->
    <div class="group-send-operation">
      <el-radio-group v-model="sendRadio">
        <el-radio :label="'rightNow'">立即开始</el-radio>
        <el-radio :label="'timing'">定时开始</el-radio>
        <el-date-picker
          v-model="refTime"
          type="datetime"
          placeholder="选择日期时间"
          clearable
          size="small"
          :disabled="sendRadio === 'rightNow'"
        ></el-date-picker>
      </el-radio-group>
      <el-button
        class="group-send-operation-btn"
        size="small"
        type="primary"
        @click="postSNSNewsTask"
        :loading="loading"
        :disabled="loading"
        >确认发送</el-button
      >
    </div>

    <!-- 大图dialog -->
    <el-dialog class="dialog-visible" :visible.sync="dialogVisible">
      <img
        class="circle-send-dialog"
        v-if="circleType === 'picture'"
        width="100%"
        :src="imageUrl"
        alt
      />
      <video
        class="circle-send-dialog"
        v-else-if="circleType === 'video'"
        :src="video"
        controls
      ></video>
    </el-dialog>
    <!-- 好友dialog -->
    <el-dialog
      title="选择好友"
      class="friends-dialog"
      :visible.sync="friendsDialogVisible"
      :before-close="closeFriendsDialog"
    >
      <!-- 好友列表 -->
      <div class="friends-list">
        <el-table
          :data="
            onlyShowChose
              ? friendsChose[currentPage - 1]
              : tableData[currentPage - 1]
          "
          stripe
          border
          style="width: 100%"
          height="60"
        >
          <el-table-column
            type="index"
            :index="indexMethod"
            label="序号"
            width="60px"
          ></el-table-column>
          <el-table-column label="昵称" prop="FriendNick"></el-table-column>
          <el-table-column label="头像" width="70px">
            <template slot-scope="scope">
              <el-image
                style="width: 50px; height: 50px"
                :src="scope.row.Avatar"
              >
                <div slot="error" class="image-slot">
                  <i
                    style="font-size: 50px"
                    class="el-icon-picture-outline"
                  ></i>
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="备注名" prop="Memo"></el-table-column>
          <el-table-column label="标签">
            <template slot-scope="scope">
              <el-tag
                class="label"
                v-for="(labelId, index) in formatLabelId(scope.row.LabelIds)"
                :key="index"
                v-text="$options.filters.labelFilter(labelId, labels)"
              ></el-tag>
            </template>
          </el-table-column>
          <el-table-column width="180px">
            <template slot="header" slot-scope="scope">
              <el-button
                size="mini"
                :type="
                  friends.length === friendIdChose.length ? 'success' : 'info'
                "
                @click="choseAllFriends"
                >全选</el-button
              >
              <el-button
                size="mini"
                :type="allCheckState2 ? 'success' : 'info'"
                @click="choseAllOfPage"
                >选本页</el-button
              >
              <!-- 一下代码是为了让eslint不报错 没有什么用 -->
              <span v-if="false" v-text="scope.row"></span>
            </template>
            <template slot-scope="scope">
              <input
                type="checkbox"
                :checked="friendIdChose.indexOf(scope.row.FriendId) >= 0"
                @click="choseFriend(scope.row)"
              />
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[50, 100, 150, 200]"
          :page-size="pageSize"
          :pager-count="7"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalPage"
        ></el-pagination>
      </div>
      <div class="operation-box">
        <!-- 搜索 -->
        <el-input
          class="search-input"
          prefix-icon="el-icon-search"
          type="text"
          placeholder="请输入内容"
          v-model="search"
          maxlength="20"
          show-word-limit
          @keyup.enter.native="searchChange"
        ></el-input>
        <!-- 标签 -->
        <div class="send-labels">
          <span
            v-if="labels.length === 0"
            v-text="'没有标签或者刷新通讯录'"
          ></span>
          <div class="labels scroll" v-else>
            <el-tag
              class="label"
              v-for="(label, index) in labels"
              :key="index"
              v-text="label.LabelName"
              @click="showLabel(label)"
            ></el-tag>
          </div>
        </div>
        <!-- 操作 -->
        <div class="operation-btns">
          <el-switch
            v-model="onlyShowChose"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-text="仅显示已选中的"
          ></el-switch>
          <el-button
            type="primary"
            size="mini"
            @click="friendsDialogVisible = false"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>
    <!-- 标签dialog -->
    <el-dialog
      title="标签好友"
      class="filter-dialog"
      :visible.sync="dialogSearchVisible"
      :before-close="closeDialog"
    >
      <el-table
        :data="searchContent"
        stripe
        border
        style="width: 100%"
        height="60"
      >
        <el-table-column
          type="index"
          :index="indexMethod"
          label="序号"
          width="60px"
        ></el-table-column>
        <el-table-column label="昵称" prop="FriendNick"></el-table-column>
        <el-table-column label="头像" width="70px">
          <template slot-scope="scope">
            <el-image style="width: 50px; height: 50px" :src="scope.row.Avatar">
              <div slot="error" class="image-slot">
                <i style="font-size: 50px" class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="备注名" prop="Memo"></el-table-column>
        <el-table-column label="标签">
          <template slot-scope="scope">
            <el-tag
              class="label"
              v-for="(labelId, index) in formatLabelId(scope.row.LabelIds)"
              :key="index"
              v-text="$options.filters.labelFilter(labelId, labels)"
            ></el-tag>
          </template>
        </el-table-column>
        <el-table-column>
          <template slot="header" slot-scope="scope">
            <el-button
              size="mini"
              :type="allCheckState ? 'success' : 'info'"
              @click="choseAllSearchContent"
              >全选</el-button
            >
            <span v-if="false" v-text="scope.row"></span>
          </template>
          <template slot-scope="scope">
            <input
              type="checkbox"
              :checked="friendIdChose.indexOf(scope.row.FriendId) >= 0"
              @click="choseFriend(scope.row)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'FriendCircleSend',
  data() {
    return {
      // 消息类型
      circleTypes: [
        {
          label: '纯文本',
          value: "text"
        },
        {
          label: '图片',
          value: "picture"
        },
        {
          label: '视频',
          value: "video"
        },
        {
          label: '链接',
          value: "link"
        }
      ],
      circleType: 'text', // 朋友圈类型
      circleTypeTip: {
        text: '纯文本模式，不能上传图片或视频！',
        picture: '只能上传jpg/png文件，且不超过2MB',
        video: '只能上传mp4文件，且不超过10秒',
        link: '',
      }, // 朋友圈类型提示
      sendRadio: 'rightNow', // 立即发送还是定时发送
      refTime: new Date().getTime(), // 定时发送的时间
      visibleType: 0, // 随可以看
      text: '', // 文本
      onlyShowChose: false, // 文本

      hideUpload: false, // 隐藏图片上传按钮
      showFileList: true, // 显示图片列表
      imagesList: [], // 图片回显

      showVideoList: true, // 显示图片列表
      hideVideoUpload: false, // 隐藏视频上传按钮
      videoList: [],
      upData: { myfile: '', packageName: 'pc' }, // 上传文件data
      imageUrl: '', // 大图url
      dialogVisible: false, // 显示大图

      imageUrls: [], // 图片
      video: '', // 视频
      comment: '', // 评论

      linkUrl: 'http://xiaohua.zol.com.cn/detail60/59426.html', // 评论
      linkImg: 'https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture', // 评论
      linkTitle: '看一看，乐一乐', // 评论
      friendsDialogVisible: false,

      currentPage: 1, // 当前页
      pageSize: 50, // 每页消息数
      sending: false, // 发送状态
      friendIdChose: [], // 要发送的好友id
      friendsChose: [], // 已经选中的好友
      tags: [], // 标签
      search: '', // 搜索框的内容
      searchContent: [], // 搜索结果
      dialogSearchVisible: false, // 显示搜索的结果
      loading: false
    }
  },
  computed: {
    ...mapGetters({
      labels: 'nedb/circleLabels',
      friends: 'nedb/circleFriends',
      currentWechats: 'currentWechats',
    }),
    // 当前选中的微信id
    currentWeChatId() {
      return this.currentWechats['circleSend']
    },
    // 好友总数
    totalPage() {
      return this.friends.length
    },
    // 填充表格数据
    tableData() {
      // 分页 每页50
      let newFriends = []
      let size = this.pageSize
      for (let i = 0; i < this.friends.length; i += size) {
        newFriends.push(this.friends.slice(i, i + size))
      }
      return newFriends
    },
    // 搜索结果是否全选
    allCheckState() {
      let state = this.searchContent.every((x) => {
        return this.friendIdChose.indexOf(x.FriendId) >= 0
      })
      return state
    },
    allCheckState2() {
      let friends = this.tableData[this.currentPage - 1]
      if (friends) {
        return friends.every((x) => {
          return this.friendIdChose.indexOf(x.FriendId) >= 0
        })
      }
      return false
    }
  },
  watch: {
    currentWeChatId(val) {
      this.visibleType = 0
      this.currentPage = 1
      this.friendIdChose = []
    },
    onlyShowChose(newVal) {
      if (newVal) {
        let newFriends = []
        newFriends = this.friends.filter((x) => {
          return this.friendIdChose.indexOf(x.FriendId) >= 0
        })
        let newFriendsChose = []
        let size = this.pageSize
        for (let i = 0; i < newFriends.length; i += size) {
          newFriendsChose.push(newFriends.slice(i, i + size))
        }
        this.friendsChose = newFriendsChose
      }
    }
  },
  methods: {
    // 定时群发 时间转换
    transformTime(times) {
      var date = new Date(times)
      let Y = date.getFullYear() + '-'
      let M =
        (date.getMonth() + 1 < 10
          ? '0' + (date.getMonth() + 1)
          : date.getMonth() + 1) + '-'
      let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' '
      let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':'
      let m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      // let s = date.getSeconds()
      let time = Y + M + D + h + m
      return time
    },
    // 发朋友圈
    postSNSNewsTask() {
      if (!this.currentWeChatId) {
        this.$message.warning('请选择微信!')
        return
      }
      // 表单验证
      if (this.circleType === 'text' && !this.text) {
        this.$message.warning('请设置文本内容!')
        return
      } else if (this.circleType === 'picture' && this.imageUrls.length === 0) {
        this.$message.warning('请设置图片!')
        return
      } else if (this.circleType === 'video' && !this.video) {
        this.$message.warning('请设置视频!')
        return
      } else if (this.circleType === 'link' && (!this.linkUrl || !this.linkImg || !this.linkTitle)) {
        this.$message.warning('请设置链接参数!')
        return
      }

      // 谁可以看
      let visible = {
        Type: this.visibleType,
        Labels: '',
        Friends: ''
      }
      if (this.sendRadio === 'timing' && (this.visibleType === '1' || this.visibleType === '2')) {
        this.$message.warning('定时发朋友圈,只能设置 公开 或 不给谁看!')
        return
      }
      if (this.visibleType === '2' || this.visibleType === '3') {
        if (this.friendIdChose.length === 0) {
          this.$message.warning('请至少选择一个好友！')
          return
        } else {
          let friends = this.friendIdChose.join(',')
          visible.Friends = friends
        }
      }
      // 附件
      let attachment = {}
      switch (this.circleType) {
        case 'picture':
          attachment = { Type: 2, Content: this.imageUrls }
          break
        case 'video':
          attachment = { Type: 3, Content: [this.video] }
          break
        case 'link':
          // 链接：[url;标题;图片url]
          attachment = { Type: 0, Content: [this.linkUrl, this.linkTitle, this.linkImg] }
          break
        default:
          break
      }
      this.$confirm('即将发送朋友圈, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.sendRadio === 'rightNow') {
          let circle = {
            WeChatId: this.currentWeChatId,
            Content: this.text,
            Attachment: attachment,
            Comment: this.comment,
            // TaskId: new Date().getTime() * 10000 + parseInt(Math.random() * 10000),
            Visible: visible
          }
          //   this.loading = true
          this.$store.dispatch('websocket/PostSNSNewsTask', circle)
          //   setTimeout(() => {
          //     this.loading = false
          //   }, 3000);
        } else {
          let message = {
            tasktype: 2,
            state: 1, // 状态1开启中0已完成
            wechatId: this.currentWeChatId, // 要执行的微信号
            execute_time: this.transformTime(this.refTime), // 执行时间
            content: this.text, // 内容
            comment: this.comment, // 针对发朋友圈
            restype: attachment.Type ? attachment.Type : 1, // 资源类型(群发好友:0文字 1图片；朋友圈:0链接 2图片 3短视频)
            // attachtype: attachment.Type ? attachment.Type : 1,// 附件类型
            // attachtcontent: attachment.Content ? attachment.Content : '',// 附件内容
            // whoinvisible: visible.Friends,// 不给谁看
          }
          if (attachment.Type) {
            message.attachtype = attachment.Type
            message.attachtcontent = attachment.Content.join(',')
          }
          if (this.visibleType === '3') {
            message.whoinvisible = visible.Friends
          }
          this.$store.dispatch('websocket/AddTaskTimeInfo', message)
        }
        this.loading = true
        setTimeout(() => {
          this.loading = false
        }, 3000);
      }).catch(() => {
        this.$message.info('已取消删除');
      });
    },
    formatLabelId(LabelIds) {
      let labelIds = []
      if (LabelIds) {
        labelIds = LabelIds.split(',')
      }
      return labelIds
    },
    // 图片超出个数限制时的钩子
    handleImageExceed(files, fileList) {
      this.$message.warning(`当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    // 图片改变
    handleImageChange(file, fileList) {
      if (fileList.length === 9) {
        this.showFileList = true
        this.hideUpload = true
      }
    },
    // 图片类型大小验证
    beforeImageUpload(file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.warning('上传图片只能是 JPG|PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.warning('上传图片大小不能超过 2MB!');
      }
      this.upData.myfile = file
      return isJPG && isLt2M;
    },
    // 图片上传成功
    handleImageSuccess(res, file, fileList) {
      for (const fl of fileList) {
        if (fl.response) {
          fl.url = fl.response.data.url
        }
      }
      this.imagesList = fileList
      this.imageUrls.push(res.data.url)
    },
    // 图片上传失败
    handleImageError(err, file) {
      this.$alert(err, '文件上传失败', { type: 'error' })
      this.hideUpload = false
    },
    // 图片移除
    handleImageRemove(file, fileList) {
      let imgUrlId = this.imageUrls.indexOf(file.response.data.url)
      this.imageUrls.splice(imgUrlId, 1)
      this.hideUpload = false
      this.imagesList = fileList
    },
    // 视频改变
    // handleVideoChange(file, fileList) {
    //   this.hideVideoUpload = true
    // },
    // 视频格式和大小验证
    beforeVideoUpload(file) {
      const isMP4 = file.type === 'video/mp4';
      const isLt2M = file.size / 1024 / 1024 < 20;
      if (!isMP4) {
        this.$message.warning('上传视频只能是 MP4 格式!');
      }
      if (!isLt2M) {
        this.$message.warning('上传视频大小不能超过 20MB!');
      }
      if (isMP4 && isLt2M) {
        this.upData.myfile = file
      }
      return isMP4 && isLt2M;
    },
    // 视频上传成功
    handleVideoSuccess(res, file, fileList) {
      console.log('视频上传成功')
      for (const fl of fileList) {
        if (fl.response) {
          fl.url = fl.response.data.url
        }
      }
      this.showVideoList = true
      this.hideVideoUpload = true
      this.videoList = fileList
      this.video = res.data.url
    },
    // 视频上传失败
    handleVideoError(err, file) {
      this.$alert(err, '文件上传失败', { type: 'error' })
      this.hideVideoUpload = false
      this.showVideoList = false
    },
    // 视频移除
    handleVideoRemove(file, fileList) {
      this.video = ''
      this.videoList = fileList
      this.hideVideoUpload = false
      this.showVideoList = false
    },
    // 图片|视频 大图展示
    handlePictureCardPreview(file) {
      if (this.circleType === 'picture') {
        this.imageUrl = file.url;
      } else {
        this.video = file.url
      }
      this.dialogVisible = true;
    },
    // 修改pageSize
    handleSizeChange(val) {
      this.pageSize = val
    },
    // 修改当前页
    handleCurrentChange(val) {
      this.currentPage = val
    },
    // 计算序号
    indexMethod(index) {
      return index + 1;
    },
    // 搜索
    searchChange() {
      let newFriends = []
      let val = this.search
      if (!val) return
      for (const friend of this.friends) {
        if ((friend.FriendNick && friend.FriendNick.indexOf(val) >= 0) || (friend.Memo && friend.Memo.indexOf(val) >= 0)) {
          newFriends.push(friend)
        }
      }
      this.searchContent = newFriends
      this.dialogSearchVisible = true
    },
    // 显示labels
    showLabel(label) {
      let labelId = label.LabelId.toString()
      let newFriends = []
      for (const friend of this.friends) {
        if (friend.LabelIds) {
          let la = friend.LabelIds.split(',')
          if (la.indexOf(labelId) >= 0) {
            newFriends.push(friend)
          }
        }
      }
      if (newFriends.length > 0) {
        this.searchContent = newFriends
        this.dialogSearchVisible = true
      } else {
        this.$message.warning('没有数据')
      }
    },
    closeFriendsDialog(done) {
      this.search = ''
      this.onlyShowChose = false
      done()
    },
    // 关闭searchdialog 之前先清空数据
    closeDialog(done) {
      this.searchContent = []
      done()
    },
    // 选择好友
    choseFriend(friend) {
      let friendId = friend.FriendId
      let fid = this.friendIdChose.indexOf(friendId)
      if (fid >= 0) {
        this.friendIdChose.splice(fid, 1)
      } else {
        this.friendIdChose.push(friendId)
      }
    },
    // 全选
    choseAllFriends() {
      if (this.friendIdChose.length === this.friends.length) {
        this.friendIdChose = []
      } else {
        for (const friend of this.friends) {
          if (this.friendIdChose.indexOf(friend.FriendId) === -1) {
            this.friendIdChose.push(friend.FriendId)
          }
        }
      }
    },
    // 本页全选
    choseAllOfPage() {
      let friends = this.tableData[this.currentPage - 1]
      if (this.allCheckState2) {
        for (const friend of friends) {
          let friendId = friend.FriendId
          let fid = this.friendIdChose.indexOf(friendId)
          this.friendIdChose.splice(fid, 1)
        }
      } else {
        for (const friend of friends) {
          let friendId = friend.FriendId
          let fid = this.friendIdChose.indexOf(friendId)
          if (fid < 0) {
            this.friendIdChose.push(friendId)
          }
        }
      }
    },
    // 搜索内容全选
    choseAllSearchContent() {
      if (this.allCheckState) {
        for (const friend of this.searchContent) {
          let friendId = friend.FriendId
          let fid = this.friendIdChose.indexOf(friendId)
          this.friendIdChose.splice(fid, 1)
        }
      } else {
        for (const friend of this.searchContent) {
          let friendId = friend.FriendId
          let fid = this.friendIdChose.indexOf(friendId)
          if (fid < 0) {
            this.friendIdChose.push(friendId)
          }
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.base-tips {
  width: 110px;
  min-width: 110px;
  font-weight: 400px;
  margin-right: 10px;
  color: $font-color-1;
  display: inline-block;
}

.friend-circle-send {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  .set-send-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 5px;
    border-bottom: solid $border-color-2 2px;
    overflow: auto;
    .set-circle-type,
    .set-circle-text,
    .visible-type,
    .set-circle-other,
    .set-circle-link,
    .set-circle-comment {
      display: flex;
      align-items: center;
      margin-top: 20px;
    }
    .set-circle-other {
      position: relative;
      ::v-deep .el-upload-text {
        .el-upload {
          cursor: not-allowed;
        }
      }
      ::v-deep .set-image-ulrs {
        max-width: 50%;
        // border: solid red 1px;
        // .el-upload-list__item-thumbnail {
        //   border: solid red 1px;
        // }
      }
      .media-tip {
        position: absolute;
        bottom: -30px;
        left: 120px;
        padding: 5px;
        padding-left: 0;
      }
      ::v-deep .hide .el-upload--picture-card {
        display: none;
      }
    }

    ::v-deep .set-circle-link {
      .el-input--suffix {
        width: 50%;
      }
      .el-textarea {
        width: 50%;
      }
    }
    .set-circle-comment {
      margin-top: 40px;
    }
  }

  .group-send-operation {
    width: 100%;
    padding: 7px 15px 5px;
    display: flex;
    .group-send-operation-btn {
      margin-left: 20px;
    }
  }

  ::v-deep .dialog-visible .el-dialog__body {
    display: flex;
    justify-content: center;
    align-items: center;
    .circle-send-dialog {
      max-width: 500px;
      max-height: 500px;
    }
  }

  .friends-dialog {
    overflow: hidden;
    ::v-deep .el-dialog {
      width: 80%;
      height: 70%;
      display: flex;
      flex-direction: column;

      .el-dialog__body {
        flex: 1 1 auto;
        padding: 0;
        display: flex;
        overflow: hidden;
      }

      .friends-list {
        flex: 1 1 auto;
        overflow: auto;
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        .el-pagination {
          margin: 5px 0;
        }
      }

      .operation-box {
        width: 300px;
        min-width: 300px;
        display: flex;
        flex-direction: column;
        padding: 10px;
        .search-input {
          width: auto;
        }
        .send-labels {
          flex: 1 1 auto;
          margin: 7px 0;
          border-radius: 4px;
          overflow: hidden;
          border: 1px solid #dcdfe6;
          .labels {
            width: 100%;
            height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            .label {
              margin: 5px;
              cursor: pointer;
            }
          }
        }
        .operation-btns {
          //   border: solid red 1px;
          display: flex;
          justify-content: space-around;
          align-items: center;
        }
      }
    }

    ::v-deep .el-table {
      .cell {
        .label {
          margin: 2px;
        }
      }
    }
  }
  .filter-dialog {
    overflow: hidden;
    ::v-deep .el-dialog {
      display: flex;
      flex-direction: column;
      max-height: 70%;
      .el-dialog__body {
        height: 100%;
        padding: 0 0;
        display: flex;
        flex-direction: column;
        overflow: auto;
      }
    }
    ::v-deep .el-table .cell {
      text-overflow: clip;
      .label {
        margin: 2px;
      }
    }
  }
}
</style>
